<template>
  <div class="exhibits-box">
    <div class="title_text" ref="exhibitsBox">
      <titles :title="props.info.text" />

      <div class="title-box">
        <div class="subTitle" v-if="props.info.subTitle">——{{ props.info.subTitle }}</div>
        <div class="remarks">{{ props.info.remarks }}</div>
        <!-- <textMax :data="props.info.remarks" :maxLen="101" :tip="''" /> -->
      </div>
    </div>
    <div class="exhibits-List" v-if="props.tabDatas.length < 4" ref="exhibitsList">
      <!-- <t-row style="width: 100%" :gutter="20">
        <t-col
          :span="12 / props.tabDatas.length"
          v-for="item in props.tabDatas"
          :key="item.id"
          @click="pathInfo(item.id)"
        > -->
      <div
        style="cursor: pointer"
        ref="exhibitsItem"
        class="exhibits-item"
        :class="{ 'exhibits-item-length2': props.tabDatas.length == 2 }"
        v-for="(item, index) in props.tabDatas"
        :key="item.id"
        @click="pathInfo(item.id)"
      >
        <div style="overflow: hidden; border-radius: 50%">
          <t-image
            class="exhibits-item-img"
            :src="$filters.getLinkUrl(item.coverUrl, '?imageView2/1/w/320/h/320/format/webp')"
            alt=""
          />
          <!-- <div
            class="shadow"
            :style="{
              width: props.tabDatas.length == 4 ? '260px' : '320px',
              height: props.tabDatas.length == 4 ? '260px' : '320px',
            }"
          ></div> -->
        </div>
        <div class="item-btm">
          <div class="item-title1-box">
            <!-- <span
              :class="'titleText' + item.id"
              class="item-title1"
              :style="{
                color: store.styleInfo.fontColor,
              }"
              >{{ item.name }}</span
            > -->
            {{ item.name }}
            <!-- <div class="line" :class="'line' + item.id"></div> -->
          </div>
        </div>
      </div>
      <!-- </t-col>
      </t-row> -->
    </div>
    <div v-else ref="exhibitsList">
      <div class="scroll-box hw-click-cursor" :id="'boxs-content-scroll' + props.info.id" ref="elScrollX">
        <div
          class="scroll-item-box"
          @mouseenter="imgEnter(index, props.tabDatas)"
          @mouseleave="imgLeave(index, props.tabDatas)"
          @click="pathInfo(item.id)"
          v-for="(item, index) in props.tabDatas"
          :key="item.id"
        >
          <div class="exhibits-item" ref="exhibitsItem">
            <div style="overflow: hidden; border-radius: 50%">
              <t-image
                fit="cover"
                class="exhibits-item-img"
                :src="$filters.getLinkUrl(item.coverUrl, '?imageView2/0/w/198/h/format/webp')"
                alt=""
              />
              <!-- <div class="shadow"></div> -->
            </div>
            <div class="item-btm">
              <div class="item-title1-box">
                <span
                  :class="'titleText' + item.id"
                  class="item-title1"
                  :style="{
                    color: store.styleInfo.fontColor,
                  }"
                  >{{ item.name }}</span
                >
                <!-- <div class="line" :class="'line' + item.id"></div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <HwScrollXVue :dom="props.info.id"></HwScrollXVue>
    </div>
    <div
      style="cursor: pointer"
      @click="pathChild"
      :style="{
        color: '#fff',
        fontFamily: 'SourceHanSerifCN-Bold',
      }"
      class="left-btn flex-c-c-c"
    >
      <div class="btn-img">
        <buttonIcon />
      </div>
      <span>查看全部</span>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../route';
import { urls } from '@/utils/request/upload';
import titles from '@/wap/wapPage/wapComponents/title/title.vue';
import buttonIcon from '@/wap/wapPage/wapComponents/title/buttonIcon.vue';
import { handlemouse } from '@/utils/minxin';
import { onMounted, ref } from 'vue';
import { useProjectStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import textMax from '@/components/textMax/textMax.vue';
import HwScrollXVue from '../Subunit/component/hwScrollX.vue';
import exhibitsScroll from '@/components/exhibitsScroll/exhibitsScroll';
import { imgEnter, imgLeave } from '@/pages/templatePage/components/Subunit/component/hover';
import UnitImageNull from '@/components/unitImageNull/unitImageNull.vue';
const exhibitsBox = ref(null);
const elScrollX = ref(null);
const exhibitsItem = ref(null);
const exhibitsList = ref(null);
const router = useRouter();
const route = useRoute();
const store = useProjectStore();
onMounted(() => {
  if (props.tabDatas.length <= 4) {
  } else {
    // handlemouse(`boxs-content-scroll${props.info.id}`);
    // exhibitsScroll(elScrollX.value, `boxs-content-scroll${props.info.id}`);
  }

  animation();
  animation2();
});
const animation = () => {
  const observer = new IntersectionObserver((entries) => {
    let canTrigger = true; // 标记是否可以触发
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        // 当元素进入视窗口时触发的代码
        exhibitsBox.value.classList.add('animation-box');
        // 设置一个延迟时间，防止频繁触发
        canTrigger = false;
        setTimeout(() => {
          canTrigger = true;
        }, 500); // 设置延迟时间为 500 毫秒
      } else {
        // if (exhibitsBox.value) {
        //   exhibitsBox.value.classList.remove('animation-box');
        // }
      }
    });
  });
  observer.observe(exhibitsBox.value);
};
const animation2 = () => {
  const observer = new IntersectionObserver((entries) => {
    let canTrigger = true; // 标记是否可以触发
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        // 当元素进入视窗口时触发的代码
        for (let index = 0; index < exhibitsItem.value.length; index++) {
          setTimeout(() => {
            exhibitsItem.value[index].classList.add('animation-box2');
          }, 300 * (index + 1));
        }
        // 设置一个延迟时间，防止频繁触发
        canTrigger = false;
        setTimeout(() => {
          canTrigger = true;
        }, 500); // 设置延迟时间为 500 毫秒
      } else {
        // if (exhibitsItem.value) {
        //   for (let index = 0; index < exhibitsItem.value.length; index++) {
        //     exhibitsItem.value[index].classList.remove('animation-box2');
        //   }
        // }
      }
    });
  });
  observer.observe(exhibitsList.value);
};
const props = defineProps({
  info: {
    type: Object,
  },
  tabDatas: {
    type: Array,
  },
});
const pathInfo = (e: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[2] : pathList[2],
    query: { id: e, moduleId: props.info.id },
  });
};
const pathChild = () => {
  store.setchildModel(props.info);
  store.setCurrent(0);
  router.push({
    name: route.meta.loopType ? pathListLoop[8] : pathList[8],
    query: { childId: props.info.id },
  });
};
</script>

<style lang="less" scoped>
@import './index.less';
.exhibits-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0px;
}
.exhibits-text {
  width: 50%;
}
.exhibits-item {
  width: 99px;
  opacity: 0;
  position: relative;
  border-radius: 50%;
  transition: all 0.5s;
  .exhibits-item-img {
    border-radius: 50%;
    width: 99px;
    height: 99px;
    margin: auto;
    transition: all 0.5s;
    object-fit: contain;
  }
  .t-image {
    width: 100%;
    height: 100%;
  }
}
.item-btm {
  display: flex;
  flex-direction: column;
  padding-top: 10px;

  font-size: 15px;
  text-align: center;
  font-family: SourceHanSerifCN-bold;
}
.exhibits-List {
  width: 100%;

  display: flex;
  justify-content: space-around;
  margin-top: 12px;
}
.item-title1-box {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}
.item-title1 {
  display: inline-block;
  font-weight: 500;
  line-height: 30px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item-title2 {
  // font-family: SourceHanSerif;
  font-weight: 500;
  color: #333333;
  line-height: 30px;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis; //文本溢出显示省略号
  white-space: nowrap; //文本不会换行
}
.item-title3 {
  margin-top: 12px;
  overflow: hidden;
  text-overflow: ellipsis; //文本溢出显示省略号
  white-space: nowrap; //文本不会换行
}
.scroll-box {
  display: flex;
  width: 100vw;
  // height: 346px;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 12px 16px;
  padding-bottom: 0;

  .scroll-item-box {
    width: 99px;
    margin-right: 10px;
    display: flex;
    font-size: 18px !important;
  }
}
.scroll-box::-webkit-scrollbar {
  display: none;
}
.title_text {
  width: 100%;
  // height: 194px;
  // transform: translateY(100%);
  overflow: hidden;
  // animation: slideIn 0.5s forwards;
  // opacity: 0;
}
.animation-box {
  animation: slideIn 0.5s forwards;
}
@keyframes slideIn {
  0% {
    padding-top: 194px;
    // transform: translateY(100%); /* 元素初始位置 */
    opacity: 0;
  }
  100% {
    padding-top: 0;
    opacity: 1;
    // transform: translateY(0); /* 元素最终位置 */
  }
}
.animation-box2 {
  animation: slideIn2 0.5s forwards;
}
@keyframes slideIn2 {
  0% {
    transform: translateX(-10%); /* 元素初始位置 */
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* 元素最终位置 */
  }
}
.shadow {
  width: 260px;
  height: 260px;
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0);
  transition: all 0.5s;
  z-index: 99;
  border-radius: 50%;
}
// .exhibits-item:hover .shadow {
//   background: rgba(0, 0, 0, 0.4);
// }
// .exhibits-item:hover .exhibits-item-img {
//   transform: scale(1.1);
// }
.line {
  width: 0px;
  height: 2px;
  background: #000;
  transform: all 0.5s;
  margin-bottom: 15px;
  margin: auto;
}
.left-btn {
  margin-top: 20px !important;
}
.remarks {
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 6; //行数
  line-clamp: 6;
  -webkit-box-orient: vertical; //盒子中内容竖直排列
  font-size: 16px;
  // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
  // font-weight: 500;
  color: #333333;
  line-height: 32px;
  text-align: justify;
  margin-top: 10px;
}
.exhibits-item-length2 {
  width: 152px !important;
  // height: 152px !important;
  .exhibits-item-img {
    width: 152px;
    height: 152px;
  }
}
.exhibits-item-length2:first-child {
  margin-right: 9px;
}
/deep/.unit-exbit-null-remarks-info {
  margin-top: 12px;
}
.title-box {
  padding: 0 16px;
}
</style>
